/**
 * 时间轴指令
 */

APP.run(['$templateCache', function ($templateCache) {
  $templateCache.put('time-line-simple.html',
    '<div class="time-line-simple">\n' +
    '    <div class="row row-no-padding" style="margin-top: 0" ng-repeat="item in data track by $index">\n' +
    '        <div class="col col-20 icon-container">\n' +
    '            <i class="icon"\n' +
    '               ng-class="{\'first\': ($index == 0),\'ion-android-radio-button-on\': ($index == 0),\'ion-record\':($index != 0)}"></i>\n' +
    '\n' +
    '            <div class="line-top" ng-if="$index != 0">\n' +
    '            </div>\n' +
    '            <div class="line-bottom" ng-if="$index != (data.length -1)">\n' +
    '            </div>\n' +
    '        </div>\n' +
    '        <div class="col col-80">\n' +
    '            <div class="detail-container">\n' +
    '                <div class="detail" ng-class="{\'first\':($index == 0)}">\n' +
    '                    {{getContent($index)}}<br/>\n' +
    '                    {{getDateTime($index)}} <br/>\n' +
    '                </div>\n' +
    '            </div>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '</div>\n' +
    '');
}]);
APP.run(['$templateCache', function ($templateCache) {
  $templateCache.put('time-line.html',
    '<div class="time-line">\n' +
    '    <div class="row row-no-padding" style="margin-top: 0" ng-repeat="item in data track by $index">\n' +
    '        <div class="col col-20 icon-container">\n' +
    '            <img ng-src="{{getImage($index)}}" ng-if="getImage($index)" class="img"/>\n' +
    '            <i class="{{getIcon($index)}}" ng-if="getIcon($index)"></i>\n' +
    '\n' +
    '            <div class="line-top" ng-if="$index != 0">\n' +
    '            </div>\n' +
    '            <div class="line-bottom" ng-if="$index != (data.length -1)">\n' +
    '            </div>\n' +
    '        </div>\n' +
    '        <div class="col col-80 ">\n' +
    '            <div class="detail-container">\n' +
    '                <div class="detail-tr"></div>\n' +
    '                <div class="detail">\n' +
    '                    {{getDateTime($index)}} <br/>\n' +
    '                    {{getContent($index)}}\n' +
    '                </div>\n' +
    '            </div>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '</div>\n' +
    '');
}]);

(function (doc, cssText) {
  var styleEl = doc.createElement("style");
  doc.getElementsByTagName("head")[0].appendChild(styleEl);
  if (styleEl.styleSheet) {
    if (!styleEl.styleSheet.disabled) {
      styleEl.styleSheet.cssText = cssText;
    }
  } else {
    try {
      styleEl.innerHTML = cssText;
    } catch (ignore) {
      styleEl.innerText = cssText;
    }
    }
}(document, ".time-line {\n" +
  "    background: #2b2b2b\n" +
  "}\n" +
  "\n" +
  ".time-line .icon-container {\n" +
  "    position: relative;\n" +
  "    margin: 0 auto;\n" +
  "    text-align: center;\n" +
  "}\n" +
  "\n" +
  ".time-line .icon-container .icon {\n" +
  "    width: 50px;\n" +
  "    height: 50px;\n" +
  "    position: relative;\n" +
  "    top: 10px;\n" +
  "    -webkit-border-radius: 100%;\n" +
  "    -moz-border-radius: 100%;\n" +
  "    border-radius: 100%;\n" +
  "    border: solid 2px darkgray;\n" +
  "    z-index: 1;\n" +
  "    display: inline-block;\n" +
  "    padding-top: 8px;\n" +
  "    color: white;\n" +
  "    font-size: 30px;\n" +
  "    background: #2b2b2b;\n" +
  "}\n" +
  "\n" +
  ".time-line .icon-container .img {\n" +
  "    width: 50px;\n" +
  "    height: 50px;\n" +
  "    position: relative;\n" +
  "    top: 10px;\n" +
  "    -webkit-border-radius: 100%;\n" +
  "    -moz-border-radius: 100%;\n" +
  "    border-radius: 100%;\n" +
  "    border: solid 2px darkgray;\n" +
  "    z-index: 1;\n" +
  "    display: inline-block;\n" +
  "    color: white;\n" +
  "    font-size: 30px;\n" +
  "    background: #2b2b2b;\n" +
  "}\n" +
  "\n" +
  ".time-line .icon-container .line-top {\n" +
  "\n" +
  "    width: 2px; /*线宽度*/\n" +
  "    background: darkgray;\n" +
  "    height: 20%;\n" +
  "    position: absolute;\n" +
  "    top: 0;\n" +
  "    left: 50%;\n" +
  "    margin-left: -1px; /*线宽度÷2*/\n" +
  "}\n" +
  "\n" +
  ".time-line .icon-container .line-bottom {\n" +
  "\n" +
  "    width: 2px; /*线宽度*/\n" +
  "    background: darkgray;\n" +
  "    height: 80%;\n" +
  "    position: absolute;\n" +
  "    top: 20%;\n" +
  "    left: 50%;\n" +
  "    margin-left: -1px; /*线宽度÷2*/\n" +
  "}\n" +
  "\n" +
  ".time-line .detail-container {\n" +
  "    padding: 10px 10px 10px 15px;\n" +
  "    position: relative;\n" +
  "    color: #3e3e3e;\n" +
  "}\n" +
  "\n" +
  ".time-line .detail-container .detail {\n" +
  "    padding: 10px;\n" +
  "    background: #fafafa;\n" +
  "    height: 100%;\n" +
  "    -webkit-border-radius: 5px;\n" +
  "    -moz-border-radius: 5px;\n" +
  "    border-radius: 5px;\n" +
  "    z-index: 15;\n" +
  "}\n" +
  "\n" +
  ".time-line .detail-container .detail-tr {\n" +
  "    position: absolute;\n" +
  "    left: 3px;\n" +
  "    top: 25px;\n" +
  "    width: 0;\n" +
  "    height: 0;\n" +
  "    border-top: solid 7px transparent;\n" +
  "    border-bottom: solid 7px transparent;\n" +
  "    border-right: solid 15px #fafafa;\n" +
  "    z-index: 0;\n" +
  "}"));

(function (doc, cssText) {
  var styleEl = doc.createElement("style");
  doc.getElementsByTagName("head")[0].appendChild(styleEl);
  if (styleEl.styleSheet) {
    if (!styleEl.styleSheet.disabled) {
      styleEl.styleSheet.cssText = cssText;
    }
  } else {
    try {
      styleEl.innerHTML = cssText;
    } catch (ignore) {
      styleEl.innerText = cssText;
    }
    }
}(document, "\n" +
  ".time-line-simple {\n" +
  "    background: #fafafa\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .icon-container {\n" +
  "    position: relative;\n" +
  "    margin: 0 auto;\n" +
  "    text-align: center;\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .icon-container .first {\n" +
  "    color: darkgreen !important;\n" +
  "    font-size: 28px !important;\n" +
  "    top: 7px !important;\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .icon-container .icon {\n" +
  "    width: 50px;\n" +
  "    height: 50px;\n" +
  "    position: relative;\n" +
  "    top: 10px;\n" +
  "    -webkit-border-radius: 100%;\n" +
  "    -moz-border-radius: 100%;\n" +
  "    border-radius: 100%;\n" +
  "    z-index: 1;\n" +
  "    color: darkgray;\n" +
  "    font-size: 16px;\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .icon-container .line-top {\n" +
  "\n" +
  "    width: 2px; /*线宽度*/\n" +
  "    background: darkgray;\n" +
  "    height: 30%;\n" +
  "    position: absolute;\n" +
  "    top: 0;\n" +
  "    left: 50%;\n" +
  "    margin-left: -1px; /*线宽度÷2*/\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .icon-container .line-bottom {\n" +
  "\n" +
  "    width: 2px; /*线宽度*/\n" +
  "    background: darkgray;\n" +
  "    height: 70%;\n" +
  "    position: absolute;\n" +
  "    top: 30%;\n" +
  "    left: 50%;\n" +
  "    margin-left: -1px; /*线宽度÷2*/\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .detail-container {\n" +
  "    position: relative;\n" +
  "    color: gray;\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .row + .row .detail-container{\n" +
  "    border-top: solid 1px #c8c8c8;\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .detail-container .first {\n" +
  "    color: darkgreen;\n" +
  "}\n" +
  "\n" +
  ".time-line-simple .detail-container .detail {\n" +
  "    padding: 10px;\n" +
  "    background: #fafafa;\n" +
  "    height: 100%;\n" +
  "    z-index: 10;\n" +
  "}"));

/**
 * creater:chuanpeng.zhu
 * create time:2016/6/8
 * describe：todo
 **/
APP
  .directive('timeLine', ['$state', '$ionicScrollDelegate', '$timeout',
    function ($state, $ionicScrollDelegate, $timeout) {
      return {
        restrict: 'E',
        replace: true,
        scope: true,
        templateUrl: 'time-line.html',
        link: function (scope, element, attr, controller) {

        }
      }
    }])

  .directive('timeLineSimple', ['$state', '$ionicScrollDelegate', '$timeout',
    function ($state, $ionicScrollDelegate, $timeout) {
      return {
        restrict: 'E',
        replace: true,
        scope: true,
        templateUrl: 'time-line-simple.html',
        link: function (scope, element, attr, controller) {

        }
      }
    }]);
